<template>
	<view class="conbox">
		<u-navbar title="抽奖" placeholder safeAreaInsetTop @leftClick="upOnelevel" autoBack></u-navbar>
		<view class="container">
			<!-- 背景 -->
			<image src="../../static/bg.png" class="cont"></image>
			<image src="../../static/caidai.png" class="caidai"></image>
			<!-- <image src="../../static/bj_xy.png" class="caidai"></image> -->
			<view class="main" style="padding-top: 50upx;">
				<view class="canvas-container">
					<view :animation="animationData" class="canvas-content" id="zhuanpano">
						<!-- 分割线 -->
						<view class="canvas-line">
							<!--  +(width / 2)再旋转真身的一半 -->
							<view class="canvas-litem" v-for="(item,index) in list" :key="index"
								:style="{transform:'rotate('+(index * width + width / 2)+'deg)'}">
							</view>
						</view>
						<view class="canvas-list">
							<!-- 文字 -->
							<view class="canvas-item" v-for="(iteml,index) in list" :key="index"
								:style="{transform: 'rotate('+(index * width)+'deg)'}">
								<view class="canvas-item-text" :style="'transform:rotate('+(index )+')'">
									<text style="font-size: 32rpx;">{{iteml.name}}</text>
								</view>
							</view>
						</view>
					</view>

					<view @tap="playReward" class="canvas-btn" :class="btnDisabled">开始 </view>
				</view>
			</view>
			<!-- 规则 -->
			<view class="guize" style="margin-top: 100upx;">
				<view class="title">
					规则说明
				</view>
				<view class="g_item">
					1.用户每天登录即送1次抽奖机会，隔天刷新机会。
				</view>
				<view class="g_item">
					2.用户点击大转盘抽奖按钮，获得的奖品，可在我的优惠卷中查看
				</view>
			</view>
		</view>
		<!-- 提示订单的 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		timestampToTime
	} from '../../common/utils.js'
	export default {
		data() {
			return {
				list: [{
						"name": "5折",
						"value": "5",
					},
					{
						"name": "6折",
						"value": "6",
					},
					{
						"name": "7折",
						"value": "7",
					},
					{
						"name": "8折",
						"value": "8",
					},
					{
						"name": "9折",
						"value": "9",
					},
					{
						"name": "感谢参与",
						"value": "10",
						isNoPrize: true, // 是否未中奖
					},
				],
				width: 0, //奖品列表宽度
				animationData: {}, //实例的export方法导出动画数据传递给组件的animation属性
				btnDisabled: '', //开始动画，变成不可以点击
				runDeg: 0, //旋转角度

			}
		},
		computed: {
			...mapState('userInfo', ['userSocketID'])
		},
		onShow() {
			// 获取奖品列表
			this.width = 360 / this.list.length
		},
		methods: {
			// 动画
			animation(index, duration) {
				//中奖---->index
				let list = this.list
				//旋转8周
				let runNum = 8
				// 旋转角度----旋转到奖品角度
				this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - index * (360 / list.length))

				//创建动画
				let animationRun = uni.createAnimation({
					duration: duration,
					timingFunction: 'ease' //动画以低速开始，然后加快，在结束前变慢
				})
				// step() 描述动画
				animationRun.rotate(this.runDeg).step()
				// 通过动画实例的 export 方法导出动画数据传递给  组件的animation属性
				this.animationData = animationRun.export()
				// 开始按钮禁用
				this.btnDisabled = 'disabled'
			},
			//发起抽奖
			async playReward() {
				let time = uni.getStorageSync('couponsTime')
				if (time) {
					// 获取当前时间
					let currTime = new Date().getTime()
					// 比较日期
					if (timestampToTime(time) === timestampToTime(currTime)) {
						this.$refs.uToast.show({
							type: 'error',
							message: '今天已经抽奖过了~',
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
						})
						return
					} else {
						uni.setStorageSync('couponsTime', currTime)
					}
					// 判断是否超过24小时
					// let twoHour = 24 * 60 * 60 * 1000
					// if ((currTime - time) > twoHour) {
					// 	uni.setStorageSync('couponsTime', currTime)
					// } else {
					// this.$refs.uToast.show({
					// 	type: 'error',
					// 	message: '冷却时间还没到哦~',
					// 	iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					// })
					// return
					// }
					// // 当日---23.59.59
					// let oldTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 *
					// 	1000 - 1).getTime()
				} else {
					// 第一次--抽奖存放时间
					let nowTime = new Date().getTime()
					uni.setStorageSync('couponsTime', nowTime)
				}
				// 后端判断--中奖号码
				let result = await this.$http('/coupons', {
					userID: this.userSocketID
				})
				console.log(result, 128)
				if (result.code !== 200) return console.log('抽奖失败')

				// 生成 0 - 5之间的数 
				const index = result.index

				// duration 最大6000---转速
				// const duration = Math.round(Math.random() * (6000 - 1000) + 1000)

				// 使用方法--转盘
				this.animation(index, 6000)
				setTimeout(() => {
					uni.showModal({
						content: this.list[index].isNoPrize ? '抱歉，您未中奖' : '恭喜您获得，' + this.list[index]
							.name + '优惠卷'
					})
					this.btnDisabled = ''
				}, 6000)
			},
			// 头部返回
			upOnelevel() {
				uni.redirectTo({
					url: '/pages/home/home'
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	.icon-awrad {
		font-size: 50rpx !important;
	}

	.conbox {
		width: 750rpx;
		height: 100vh;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	// .container {
	// 	width: 750rpx;
	// 	min-height: 100%;
	// 	height: auto;
	// 	position: relative;
	// }

	.container,
	image.cont {
		width: 750upx;
		min-height: 100vh;
		height: auto;
		position: relative;
	}

	image.cont {
		height: 100%;
		position: absolute;
		z-index: 0;
	}

	image.caidai {
		position: absolute;
		top: 0;
		left: 0;
		width: 750upx;
		height: 1024upx;
	}

	// image.caidai {
	// 	position: absolute;
	// 	top: 0;
	// 	left: 0;
	// 	width: 750rpx;
	// 	height: 100%;
	// }



	.header-title>view {
		padding: 8rpx 16rpx;
		border: 1px solid #d89720;
		color: #d89720;
		font-size: 28rpx;
		border-radius: 26rpx;
	}

	/* 转盘 */
	.canvas-container {
		margin: 0 auto;
		position: relative;
		width: 600rpx;
		height: 600rpx;
		background: url('../../static/circle.png') no-repeat;
		background-size: cover;
		border-radius: 50%;
	}


	.canvas-content {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		display: block;
		width: 600rpx;
		height: 600rpx;
		border-radius: inherit;
		/* background-clip: padding-box; */
		/* background-color: #ffcb3f; */
	}

	.canvas-list {
		position: absolute;
		left: 0;
		top: 0;
		width: inherit;
		height: inherit;
		z-index: 9999;
	}

	.canvas-item {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		color: #e4370e;
		/* text-shadow: 0 1upx 1upx rgba(255, 255, 255, 0.6); */
	}

	.canvas-item-text {
		position: relative;
		display: block;
		padding-top: 46rpx;
		margin: 0 auto;
		text-align: center;
		-webkit-transform-origin: 50% 300rpx;
		transform-origin: 50% 300rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #FB778B;
	}

	.canvas-item-text text {
		font-size: 30rpx;
	}

	/* 分隔线 */
	.canvas-line {
		position: absolute;
		left: 0;
		top: 0;
		width: inherit;
		height: inherit;
		z-index: 99;
	}

	.canvas-litem {
		position: absolute;
		left: 300rpx;
		top: 0;
		width: 3rpx;
		height: 300rpx;
		background-color: rgba(228, 55, 14, 0.4);
		overflow: hidden;
		-webkit-transform-origin: 50% 300rpx;
		transform-origin: 50% 300rpx;
	}

	/**
* 抽奖按钮
*/
	.canvas-btn {
		position: absolute;
		left: 260rpx;
		top: 260rpx;
		z-index: 400;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		color: #f4e9cc;
		background-color: #e44025;
		line-height: 80rpx;
		text-align: center;
		font-size: 26rpx;
		text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
		text-decoration: none;
	}

	.canvas-btn::after {
		position: absolute;
		display: block;
		content: ' ';
		left: 12rpx;
		top: -44rpx;
		width: 0;
		height: 0;
		overflow: hidden;
		border-width: 30rpx;
		border-style: solid;
		border-color: transparent;
		border-bottom-color: #e44025;
	}

	.canvas-btn.disabled {
		pointer-events: none;
		background: #b07a7b;
		color: #ccc;
	}

	.canvas-btn.disabled::after {
		border-bottom-color: #b07a7b;
	}


	.typecheckbox view {
		border: 1px solid #FF3637;
		background: transparent;
		color: #FF3637;
		display: flex;
		height: 60rpx;
		width: 140rpx;
		border-radius: 50rpx;
		align-items: center;
		justify-content: center;
		display: flex;
		margin-left: 20rpx;
	}


	.guize {
		width: 502rpx;
		min-height: 300rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 3;
		background-image: linear-gradient(-180deg, #F48549 0%, #F2642E 100%);
		border: 18upx solid #E4431A;
		border-radius: 16px;
		margin: 0 auto;
		margin-top: -104rpx;
		padding: 48rpx;
		/* box-sizing: border-box; */
		color: #fff;
	}

	.guize .title {
		text-align: center;
		margin-bottom: 28rpx;
	}

	.guize .g_item {
		font-family: PingFang-SC-Medium;
		font-size: 24rpx;
		color: #FFFFFF;
		letter-spacing: 0.5px;
		text-align: justify;
		line-height: 20px;
	}

	.myrewards .title {
		font-family: PingFang-SC-Bold;
		font-size: 16px;
		color: #E4431A;
		letter-spacing: 0.57px;
		display: flex;
		padding-top: 36rpx;
		justify-content: center;
	}
</style>
